<head>
    <script src="../build/index.js"></script>
</head>

<body>
    <canvas id="app" width="500" height="400"></canvas>

    <script>
        var $app = new Easycanvas.Painter();
        $app.register(document.getElementById('app'));
        $app.start();

        Easycanvas.ImgLoader('https://raw.githubusercontent.com/c-zhuo/easycanvas/master/demos/G.png', function (img) {
            // create a Sprite
            var Sprite1 = $app.add({
                content: {
                    img: img,
                },

                style: {
                    cutLeft: 0, cutTop: 0,
                    left: Easycanvas.Transition.oneByOne(
                        [
                            Easycanvas.Transition.linear(10, 200, 1000),
                            Easycanvas.Transition.pendulum(50, 400, 1000),
                            // Easycanvas.Transition.pendulum(50, 400, 500),
                        ]
                    ).loop(),
                    top: 0,

                    locate: 'lt', // default center
                },
            });
        });
    </script>
</body>

